import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, DatePicker, Form, InputNumber, Row, Table} from 'antd';
import Constants from '../../utils/Constants';
import RoleSelect from '../../components/common/roleSelect';
import {download} from '../../utils/commons';

const { RangePicker } = DatePicker;
const R = require('ramda');
const FormItem = Form.Item;

const ywUserYearReport = Form.create()(class YwUserYearReport extends React.Component {     //业务员年度利润表
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //多个页面共用一个state的page跟list，这里面的首次查询必须带默认的page信息
        this.props.dispatch({ type: 'report/getYwUserYearProfit', payload: { ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE) } });   
    }  

    handleSearch = (flag) => {
        let values = this.props.form.getFieldsValue();
        let newPage = R.pick(['page', 'size'], this.props.report.page);
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'report/getYwUserYearProfit',
            payload: {
                ...values,
                ...newPage
            }
        });
    };

    handleExport = () => {
        let values = this.props.form.getFieldsValue();
        let url = apiPath.mc + "/api/export/profit/ywUserYear";
        download(url, values);
    }

    columns = [
        { title: '业务员', dataIndex: 'ywUser', key: 'ywUser' },
        { title: '年份', dataIndex: 'year', key: 'year' },
        { title: '一月份', dataIndex: '1p', key: '1p' },
        { title: '二月份', dataIndex: '2p', key: '2p' },
        { title: '三月份', dataIndex: '3p', key: '3p' },
        { title: '四月份', dataIndex: '4p', key: '4p' },
        { title: '五月份', dataIndex: '5p', key: '5p' },
        { title: '六月份', dataIndex: '6p', key: '6p' },
        { title: '七月份', dataIndex: '7p', key: '7p' },
        { title: '八月份', dataIndex: '8p', key: '8p' },
        { title: '九月份', dataIndex: '9p', key: '9p' },
        { title: '十月份', dataIndex: '10p', key: '10p' },
        { title: '十一月份', dataIndex: '11p', key: '11p' },
        { title: '十二月份', dataIndex: '12p', key: '12p' },
        { title: '合计', dataIndex: 'total', key: 'total' }
    ];

    render() {
        let dataSource = R.isNil(this.props.report.dataSource) ? {} : this.props.report.dataSource;
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        const { getFieldDecorator } = this.props.form;
        let values = this.props.form.getFieldsValue();
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            current: this.props.report.page.page,
            pageSize: this.props.report.page.size,
            total: this.props.report.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = R.pick(['page', 'size'], this.props.report.page);
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'report/getYwUserYearProfit',
                    payload: {
                        ...values,
                        ...newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = R.pick(['page', 'size'], this.props.report.page);
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'report/getYwUserYearProfit',
                    payload: {
                        ...values,
                        ...newPage
                    }
                });
            }
        }
        return (
            <div>
                <Row>
                    <Col span={8}><FormItem {...formItemLayout} label={'业务员'}>{getFieldDecorator('ywUser')(<RoleSelect role={Constants.ROLE.SALES_MAN} style={{ width: '100%' }} />)}</FormItem></Col>
                    <Col span={8}><FormItem {...formItemLayout} label={'年份'}>{getFieldDecorator('year')(<InputNumber style={{ width: '80%' }}/>)}</FormItem></Col>
                    <Col span={7} style={{ marginLeft: 24 }}>
                        <Button type="primary" icon="export" style={{ marginRight: 5 }} onClick={this.handleExport.bind(this)}>导出数据</Button>
                        <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this, true)}>查询</Button>
                    </Col>
                </Row>
                
                <Table loading={this.props.loading} rowKey={record => record.id} dataSource={this.props.report.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} 
                       title={() => <span style={{ color: 'red' }}>*注：如无特殊说明以下金额币种均为CNY</span>}
                />
            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.report, report: state.report
    };
}

export default connect(mapStateToProps)(ywUserYearReport);